
<%@page import="fu.abc.DAO.CategoryDAO"%>
<%@page import="fu.abc.model.Category"%>
<%@page import="fu.abc.DAO.LocationDAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="fu.abc.model.Location"%>
<%@page import="java.util.List"%>
<%@page import="fu.abc.model.Account"%>
<%@page import="fu.abc.DAO.AccountDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vnplace - Quản lý địa điểm</title>
	
	<!-- CSS -->
	<link href="css/transcreate.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="css/managelocal.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/4.css"/>
    <link href="./content-editor/css/transcreate.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="./content-editor/css/managelocal.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="./content-editor/css/4.css"/>
    
    <script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/jts.js"></script>
    <script language="JavaScript" type="text/javascript" src="./content-editor/js/jquery.js"></script>
    <script language="JavaScript" type="text/javascript" src="./content-editor/js/jts.js"></script>
	
	<style>
		.tabs{
			width:max;
			height: max;
			margin:0 auto 50px;	
			position:relative;
		}
		.tabs input{
			position:absolute;
			top:0;
			left:0;
			display:none;	
		}
		.tabs label{
			display:block;
			float:left;
			position:relative;
			padding:10px 30px;
			line-height:1.5em;
			min-width:50px;
			text-align:center;
			color: #385c5b;
			font-size:13px;
			font-weight:bold;
			text-transform:uppercase;
			letter-spacing:1px;
			cursor:pointer;
			text-shadow:1px 1px 1px rgba(255,255,255,0.3);
			background:-moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
			border-radius:5px 5px 0 0;
			box-shadow:2px 0px 2px rgba(0,0,0,0.1),-2px 0 2px rgba(0,0,0,0.1)/*0.1*/
		}
		.tabs label:after{
			content:"";
			display:block;
			position:absolute;
			width:100%;
			height:5px;
			background:#fff;
			left:0;
			bottom:-5px;
		}
		.clear-shadow{
			clear:both;	
		}
		.content{
			position:relative;
			width:100%;
/* 			z-index:5 !important; */
		}
		.content div{
			position:absolute;
			overflow:hidden;
			top:0;
			left:0px;
			opacity:0;
			background:#fff;
			padding:10px 40px 30px;	
			border-radius:0 5px 5px 5px;
			box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);	
			transition:opacity .4s;
		}
		.content div h2{
			color:#4F8E8E;
			font-size:22px;
		}
		.content div h3{
			color:#4F8E8E;
			font-size:17px;
		}
		
		.tabs input:checked + label{
			background:#fff;
			z-index:6;	
		}
		.tabs input.tab-selector-1:checked ~ .content .content-1,
		.tabs input.tab-selector-2:checked ~ .content .content-2,
		.tabs input.tab-selector-3:checked ~ .content .content-3,
		.tabs input.tab-selector-4:checked ~ .content .content-4{
			opacity:1;
			z-index:100 !important;
		}
	</style>
	<script>
                $(document).ready(function () {
                
                        $('#demoTable').jTPS( {perPages:[5,12,15,50,'ALL'],scrollStep:1,scrollDelay:30,
                                clickCallback:function () {     
                                        // target table selector
                                        var table = '#demoTable';
                                        // store pagination + sort in cookie 
                                        document.cookie = 'jTPS=sortasc:' + $(table + ' .sortableHeader').index($(table + ' .sortAsc')) + ',' +
                                                'sortdesc:' + $(table + ' .sortableHeader').index($(table + ' .sortDesc')) + ',' +
                                                'page:' + $(table + ' .pageSelector').index($(table + ' .hilightPageSelector')) + ';';
                                }
                        });

                        // reinstate sort and pagination if cookie exists
                        var cookies = document.cookie.split(';');
                        for (var ci = 0, cie = cookies.length; ci < cie; ci++) {
                                var cookie = cookies[ci].split('=');
                                if (cookie[0] == 'jTPS') {
                                        var commands = cookie[1].split(',');
                                        for (var cm = 0, cme = commands.length; cm < cme; cm++) {
                                                var command = commands[cm].split(':');
                                                if (command[0] == 'sortasc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click();
                                                } else if (command[0] == 'sortdesc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click().click();
                                                } else if (command[0] == 'page' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .pageSelector:eq(' + parseInt(command[1]) + ')').click();
                                                }
                                        }
                                }
                        }

                        // bind mouseover for each tbody row and change cell (td) hover style
                        $('#demoTable tbody tr:not(.stubCell)').bind('mouseover mouseout',
                                function (e) {
                                        // hilight the row
                                        e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                                }
                        );

                });


        </script>
        <style>
        	#createaccount{
				margin-right: 180px;
				margin-left: -880px;
				margin-top: 10px;
				float: left;
			}
			        		
        </style>

</head>

<body class="dt-example">
	<div id="wrapper">
		<!-- h1 tag stays for the logo, you can use the a tag for linking the index page -->
		<div id="header">
			<%String acc = (String)session.getAttribute("acc"); %>
			<ul id="header-menu">
			<li><p class="logo">Content-Editor</p></li>
			<li><img class="white" src="/Vnplace/content-editor/image/white.png" width="2px" height="55px"/> </li>
			<li>
 				<%
 					if(acc==null){
 						response.sendRedirect("/Vnplace/systemAdmin/login.jsp");
 					}else{ 
				%>
				<p class="hello">
					Chào <b><%=acc %></b>
				<%} %>
				</p>
			</li>
			<li><a href="logout.jsp" class="logout">Đăng xuất</a></li>
		</ul>
			
		</div>

		<!-- // #end mainNav -->

		<div id="containerHolder">
			<div id="container">
				<div id="sidebar">
					<ul class="sideNav">
						<li><a href="/Vnplace/content-editor/contenteditor.jsp">Trang chủ</a></li>
						<li><a href="/Vnplace/content-editor/manageLocation.jsp">Quản lý địa điểm</a></li>
						<li class="create"><a href="/Vnplace/content-editor/manageCategory.jsp" >Quản lý nhóm địa điểm</a></li>
						<li class="error"><a href="/Vnplace/content-editor/manageerror.jsp" >Quản lý lỗi</a></li>
					</ul>
					<!-- // .sideNav -->
				</div>
				<!-- // #sidebar -->
				<div id="main">
					<section class="tabs">
						<div id="title">
							<h1>Quản lý địa điểm</h1>
						</div>
						<hr/>
					    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
					    <label for="tab-1" class="tab-label-1">About us</label>
					     
					    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
					    <label for="tab-2" class="tab-label-2">How we work</label>
					    <div class="clear-shadow"></div>
					                 
					    <div class="content">
					        <div class="content-1">
					            <div id="search-local">
									<form action="/Vnplace/ListLocal" method="post">
										<ul class="ul-sort">
											<li style="margin-left: 10px; margin-top: 8px;"><b>Từ khóa:</b> </li>
											<li><input type="text" size="35" name="txtSearch" class="txtsearch" placeholder="Tìm kiếm tên địa điểm........." /> </li>
											<li style="margin-left: 10px; margin-top: 8px; margin-right: 10px"><b>Tỉnh/thành phố:</b> </li>
											<li>
												<select class="province" name="province">
													<option value="" selected="selected">------ Chọn ------</option>
													<option value="1">An Giang</option>
													<option value="2">B&#224; Rịa Vũng T&#224;u</option>
													<option value="3">Bắc Giang</option>
													<option value="4">Bắc Kạn</option>
													<option value="5">Bạc Li&#234;u</option>
													<option value="6">Bắc Ninh</option>
													<option value="7">Bến Tre</option>
													<option value="8">B&#236;nh Định</option>
													<option value="9">B&#236;nh Dương</option>
													<option value="10">B&#236;nh Phước</option>
													<option value="11">B&#236;nh Thuận</option>
													<option value="12">C&#224; Mau</option>
													<option value="13">Cần Thơ</option>
													<option value="14">Cao Bằng</option>
													<option value="15">Đ&#224; Nẵng</option>
													<option value="16">Đắk Lắk</option>
													<option value="17">Đăk N&#244;ng</option>
													<option value="18">Điện Bi&#234;n</option>
													<option value="19">Đồng Nai</option>
													<option value="20">Đồng Th&#225;p</option>
													<option value="21">Gia Lai</option>
													<option value="22">H&#224; Giang</option>
													<option value="23">H&#224; Nam</option>
													<option value="24">H&#224; Nội</option>
													<option value="25">H&#224; Tĩnh</option>
													<option value="26">Hải Dương</option>
													<option value="27">Hải Ph&#242;ng</option>
													<option value="28">Hậu Giang</option>
													<option value="29">H&#242;a B&#236;nh</option>
													<option value="30">Hưng Y&#234;n</option>
													<option value="31">Kh&#225;nh H&#242;a</option>
													<option value="32">Ki&#234;n Giang</option>
													<option value="33">Kon Tum</option>
													<option value="34">Lai Ch&#226;u</option>
													<option value="35">L&#226;m Đồng</option>
													<option value="36">Lạng Sơn</option>
													<option value="37">L&#224;o Cai</option>
													<option value="38">Long An</option>
													<option value="39">Nam Định</option>
													<option value="40">Nghệ An</option>
													<option value="41">Ninh B&#236;nh</option>
													<option value="42">Ninh Thuận</option>
													<option value="43">Ph&#250; Thọ</option>
													<option value="44">Ph&#250; Y&#234;n</option>
													<option value="45">Quảng B&#236;nh</option>
													<option value="46">Quảng Nam</option>
													<option value="47">Quảng Ng&#227;i</option>
													<option value="48">Quảng Ninh</option>
													<option value="49">Quảng Trị</option>
													<option value="50">S&#243;c Trăng</option>
													<option value="51">Sơn La</option>
													<option value="52">T&#226;y Ninh</option>
													<option value="53">Th&#225;i B&#236;nh</option>
													<option value="54">Th&#225;i Nguy&#234;n</option>
													<option value="55">Thanh H&#243;a</option>
													<option value="56">Th&#224;nh Phố Hồ Ch&#237; Minh</option>
													<option value="57">Thừa Thi&#234;n Huế</option>
													<option value="58">Tiền Giang</option>
													<option value="59">Tr&#224; Vinh</option>
													<option value="60">Tuy&#234;n Quang</option>
													<option value="61">Vĩnh Long</option>
													<option value="62">Vĩnh Ph&#250;c</option>
													<option value="63">Y&#234;n B&#225;i</option>
											</select>
											</li>
											<li style="margin-left: 10px; margin-top: 8px;"><b>Loại địa điểm:</b> </li>
											<li><select id="category" name="category">
												<option value="" selected="selected">------- Chọn -------</option>
											<%
												List<Category> cate = new ArrayList();
												CategoryDAO catedao = new CategoryDAO();
												cate = catedao.listAllCategory();
												for(Category c: cate){
											%>
												<option value="<%=c.getIdcate()%>"><%=c.getCategory() %></option>
											<%} %>
											</select></li>
											<li><input type="submit" name="sort" value="Tìm kiếm" class="sort"/></li>
										</ul>
									</form>
									</div>
									<br/>
									<br/>
									<div id="createaccount">
										<button class="create-acc" onclick="window.location='/Vnplace/content-editor/create.jsp'">Tạo địa điểm mới</button>
									</div>
	
									<div id="count">
										<b class="count">Có
										<%
											// 	GET data from searchaccount
											
											Object list = request.getAttribute("listLocation");
											if(list!=null){
											List<Location> local = (List<Location>) list;
												int i = 1;
												int count=1;
												int dem = 0;
												for (Location a : local) {
													dem = count++ ;
												} %>
										<%= dem %> kết quả được tìm thấy</b>
								</div>
								<table id="demoTable" style="border: 1px solid #ccc; width: 900px;">
									<thead>
										<tr bgcolor="#FF0000">
											<td align="center" width="6"><b>STT</b></td>
											<td align="center" width="200"><b>Tên địa điểm</b></td>
											<td align="center"><b>Địa chỉ</b></td>
											<td align="center"><b>Loại địa điểm</b></td>
											<td align="center"><b>Tỉnh</b></td>
											<td align="center"><b>Kiểm duyệt</b></td>
										</tr>
									</thead>
									<tbody>
										<%
											
												for(Location a:local){
										%>
										<tr>
											<td align="center"><%=i++ %></td>
											<td><a href="/Vnplace/content-editor/viewLocation.jsp?id=<%=a.getIdNewLocal()%>" 
												 class="name"><%=a.getLocationName() %></a></td>
											<td><%=a.getAddressDetail() %></td>
											<td><%=a.getCategory() %></td>
											<td><%=a.getProvince() %></td>
											<td><a href="/Vnplace/content-editor/checkLocation.jsp?id=<%=a.getIdNewLocal()%>" 
												 class="name">Kiểm duyệt</a></td>
										</tr>
										<%} } %>
									</tbody>
									 <tfoot class="nav">
						                <tr>
						                     <td colspan="6">
						                          <div class="pagination"></div>
						                          <div class="paginationTitle">Trang</div>
						                          <div class="selectPerPage"></div>
						                          <div class="status"></div>
						                    </td>
						                </tr>
						        </tfoot>
							</table>
							</div>
					        <div class="content-2">
					            <p>Đây chính là đoạn code quan trọng nhất mà củng đơn giản nhất trong bài =))). Ý nghĩa như sau: Opacity:1 cho hiển thị lại các nội dung ở các thẻ </p>
					        </div>
					    </div>
					</section>
					<div class="clear"></div>
				</div>
			</div>
			<!-- // #container -->
		</div>
		<!-- // #containerHolder -->
		<div id="footer" class="footer">
			<p class="copyright">©Copyright 2014 Vnplace.vn</p>
		</div>
	</div>

	<!-- // #wrapper -->
</body>
</html>
